<template>
	<view>
		<view class="loadingstyle"  v-if="!loading">
			<u-loading-page loading-color="#DCB490" :loading="true" loading-text="火速加载中..."></u-loading-page>
		</view>
		<view class="placeimage flexcenter" v-if="!list.total&&loading">
			<image src="../../static/image/system/placeimagefour.png" mode=""></image>
		</view>
		<view v-if="list.total">
			<!-- 弹出层 -->
			<u-modal :show="overpage" title="当前刷题已结束,是否返回上一页" confirmColor="#DCB490" :showCancelButton='true'
				@confirm="confirm" @cancel="overpage=false"></u-modal>
			<swiper :current="swiperIndex" class="swiper" :duration="duration">
				<swiper-item catchtouchmove="stopTouchMove" v-for="(item,index) in list.data" :key="index">
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="scroll-Y mainpadding">
						<view class="flexcenter title">{{item.question}}</view>
						<u-parse :content="item.content"></u-parse>
						<view class="flexleft margin_top flex_wrap">
							<view class="smalltext">考过的院校：</view>
							<view class="smalltext jintext" v-for="scholl in item.schools" :key="scholl">{{scholl}}</view>
						</view>
						<view class="flexleft boxtext margin_top" v-show="!item.typetj">
							<view :class="item.tmtype==1?'box2':'box1'" @click="typetab(item,1)">模糊</view>
							<view :class="item.tmtype==2?'box4':'box3'" @click="typetab(item,2)">熟记</view>
							<view :class="item.tmtype==3?'box6':'box5'" @click="typetab(item,3)">理解</view>
						</view>
						<view class="flexleft boxtext margin_top" v-show="item.typetj">
							<view :class="item.tmtype==1?'box2':'box1'">模糊</view>
							<view :class="item.tmtype==2?'box4':'box3'">熟记</view>
							<view :class="item.tmtype==3?'box6':'box5'">理解</view>
						</view>
						<!-- 答题 -->
						<view class="margin_top titletext">答题</view>
						<view class="bianpadding margin_top" v-for="(ite,inde) in item.sections" :key="inde">
							<view class="strongtext">第{{inde+1}}段</view>
							<view class="flexbetween flex_wrap">
								<view class="iteminputbox flexbetween" v-for="(it,ind) in ite.option" :key="ind">
									<view class="flexleft tihao">
										<view>{{ind+1}}.</view>
										<input type="text" class="iteminput" v-model="it.reply" :disabled="item.is_zs">
									</view>
									<view v-show="item.is_zs">
										<view v-show="it.is_zq" class="dui"></view>
										<view v-show="!it.is_zq" class="cuo"></view>
									</view>
								</view>
							</view>
						</view>
						<view class="flexcenter margin_top" v-show="!item.is_zs">
							<view class="bottom3 flexcenter" @click="submitda(item,index)">提交答案</view>
						</view>
						<!-- 解析 -->
						<view v-show="item.is_zs">
							<view class="margin_top titletext">解析</view>
							<view class="bianpadding margin_top">
								<view v-for="(ite,inde) in item.sections" :key="inde">
									<view class="strongtext">第{{inde+1}}段</view>
									<view class="margin_top">
										<text v-for="(it,ind) in ite.option" :key="ind">
											{{ind+1}}.{{it.answer}}
										</text>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
			<view class="bottombox flexaround">
				<view class="bottom1 flexcenter" @click="shangti">上一题</view>
				<view class="bottom2 flexcenter" @click="xiati">{{nextext}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				duration: 500, //滑动间隔时长
				scrollTop: 0,
				page: 1,
				message: {},
				swiperIndex: 0,
				list: {
					data: []
				},
				// typetab:"",//1模糊2熟记3理解
				nextext: "下一题",
				overpage: false,
				loading:false
			}
		},
		onLoad(options) {
			this.message = JSON.parse(decodeURIComponent(options.msg));
			this.getlist()
		},
		onShow() {
		},
		watch: {
			swiperIndex() {
				console.log(1111)
				if (this.list.total - 1 == this.swiperIndex) {
					this.nextext = "完成"
				} else {
					this.nextext = "下一题"
				}
			}
		},
		methods: {
			stopTouchMove() {
				return false
			},
			getlist(isPage, page) {
				let _this = this
				httpRequest.request("/api/quizz/lists", 'POST', {
					type: this.message.type,
					headline_id: this.message.headline_id,
					pagesize: 30,
					page: page || 1
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						resList.data.forEach(item => {
							Object.assign(item, {
								is_zs: false,
								typetj: false,
								tmtype: 0
							})
						})
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							_this.list = resList
							if (this.list.total == 1) {
								this.nextext = "完成"
							}
							this.loading = true
							_this.list.data = resList.data;
						}
					}
				})
			},
			// type值切换
			typetab(item, index) {
				console.log(item, 888)
				item.tmtype = index
			},
			// 上一题
			shangti() {
				if (this.swiperIndex != 0) {
					this.swiperIndex--
				}
			},
			// 下一题
			xiati() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				// 当前对象
				// console.log(list.data[this.swiperIndex])
				// 如果解析内容已经展示,说明当前题已经作答,进入判断
				if (list.data[this.swiperIndex].is_zs) {
					// 如果类型未提交说明当前题未答完整,可进入此判断
					if (!list.data[this.swiperIndex].typetj) {
						let message = list.data[this.swiperIndex].sections;
						let need = {
							quizz_id: list.data[this.swiperIndex].id,
							type: list.data[this.swiperIndex].tmtype,
							data: []
						}
						if (need.type == 0) {
							httpRequest.toast('请选择类型');
							return false;
						}
						list.data[this.swiperIndex].typetj = true
						let j = 0;
						message.forEach(item => {
							let item_data = {
								section_id: item.id,
								data: []
							}
							let i = 0;
							item.option.forEach(ite => {
								i++;
								item_data['data'].push({
									options_id: ite.id,
									replay: ite.reply
								})
							})
							j++;
							need['data'].push(item_data);
						})
						// 提交答案
						httpRequest.request('/api/quizz/add', 'POST', {
							quizz_id: need.quizz_id,
							type: need.type,
							data: need.data
						}).then(resp => {
							// httpRequest.toast(resp.msg)
						})
					}
				}
				// 如果总数等于列表长度返回
				if (list.total == this.swiperIndex + 1) {
					this.overpage = true
				}
				// 如果当前下标等于数组长度的话调接口后缀内容
				if (this.swiperIndex == list.data.length - 1) {
					if (list.last_page <= page) {
						return false;
					}
					page++;
					_this.page = page;
					_this.getlist(true, page);
				}
				this.swiperIndex++
			},
			confirm() {
				uni.navigateBack({
					delta: 1,
					fail: res => {
						console.log(res, 999)
					}
				})
			},
			// 提交答案
			submitda(itemmsg, index) {
				let list = this.list;
				let message = itemmsg.sections;
				let is_end = true;
				let j = 0;
				message.forEach(item => {
					let item_data = {
						section_id: item.id,
						data: []
					}
					let i = 0;
					item.option.forEach(ite => {
						// if (ite.reply == '') {
						// 	httpRequest.toast('请做完题再进行提交');
						// 	is_end = false;
						// 	return false;
						// }
						if (ite.reply === ite['answer']) {
							list['data'][index]['sections'][j]['option'][i]['is_zq'] = true;
						} else {
							list['data'][index]['sections'][j]['option'][i]['is_zq'] = false;
						}
						i++;
					})
					j++;
				})
				// 如果题做完了返回true否则返回false
				if (is_end) {
					itemmsg.is_zs = true
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.placeimage{
		margin-top: 150rpx;
		width: 100%;
		image{
			width: 400rpx;
			height: 278rpx;
		}
	}
	.title{
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}
	// 底部内容
	.bottombox {
		position: fixed;
		bottom: 0;
		left: 0;
		height: 150rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		width: 100%;
		background-color: #fff;
		box-shadow: 0px 0px 15rpx 0px rgba(51, 51, 51, 0.1000);
	}

	.bottom1 {
		width: 40%;
		height: 80rpx;
		margin-bottom: 40rpx;
		border: 1rpx solid #DCB490;
		background-color: #fff;
		color: #DCB490;
		border-radius: 50rpx;
	}

	.bottom2 {
		width: 40%;
		height: 80rpx;
		margin-bottom: 40rpx;
		border: 1rpx solid #DCB490;
		background-color: #DCB490;
		color: #fff;
		border-radius: 50rpx;
	}

	.bottom3 {
		width: 40%;
		height: 80rpx;
		margin-bottom: 40rpx;
		border: 1rpx solid #5EE55B;
		background-color: #5EE55B;
		color: #fff;
		border-radius: 50rpx;
	}






	.swiper {
		width: 100%;
		height: calc(100vh - 150rpx);
	}

	.scroll-Y {
		box-sizing: border-box;
		height: calc(100vh - 150rpx);
	}

	.smalltext {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
	}

	.jintext {
		font-weight: bold;
		color: #DCB490;
	}

	// 标记盒子
	.boxtext {
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
	}

	.box1 {
		border: 2rpx solid #B7D1D8;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 15rpx 35rpx;
		color: #B7D1D8;
		margin-right: 20rpx;
	}

	.box2 {
		border: 2rpx solid #B7D1D8;
		background-color: #B7D1D8;
		border-radius: 50rpx;
		padding: 15rpx 35rpx;
		color: #fff;
		margin-right: 20rpx;
	}

	.box3 {
		border: 2rpx solid #E5885B;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 15rpx 35rpx;
		color: #E5885B;
		margin-right: 20rpx;
	}

	.box4 {
		border: 2rpx solid #E5885B;
		background-color: #E5885B;
		border-radius: 50rpx;
		padding: 15rpx 35rpx;
		color: #fff;
		margin-right: 20rpx;
	}

	.box5 {
		border: 2rpx solid #E5735B;
		background-color: #fff;
		border-radius: 50rpx;
		padding: 15rpx 35rpx;
		color: #E5735B;
	}

	.box6 {
		border: 2rpx solid #E5735B;
		background-color: #E5735B;
		border-radius: 50rpx;
		padding: 15rpx 35rpx;
		color: #fff;
	}

	// 答题环节
	.titletext {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		color: #333333;
	}

	.bianpadding {
		padding: 0 0 0 30rpx;
	}

	.iteminputbox {
		margin-top: 30rpx;
		padding: 15rpx 25rpx;
		background-color: #F6F6F6;
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 45%;
	}

	.tihao {
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #999999;
		flex: 7;
	}

	.dui {
		flex: 1;
		width: 32rpx;
		height: 32rpx;
		background-image: url("@/static/image/system/dui.png");
		background-size: 100% 100%;
	}

	.cuo {
		flex: 1;
		width: 32rpx;
		height: 32rpx;
		background-image: url("@/static/image/system/cuo.png");
		background-size: 100% 100%;
	}
</style>
